<template>
  <div> 
    <mt-header fixed title="单项赛集体报名">
      <mt-button icon="back" @click='$router.back(-1)' slot="left"></mt-button>
    </mt-header>
    <div style="height:40px;"></div>
    <div class="top-title"><i class="gray">比赛名称: </i>2019长沙岳麓区第N届羽毛球邀请赛</div>
    <div class="top-title"><i class="gray">比赛组别：</i>青年组 - 20至30岁</div>
    <step current=1 :stepArr="stepArr"></step> 
    <div v-show="!loading">  
      <div class="cf m10">
        <span class="f16 fwb fl mt5">选择俱乐部</span>        
        <span class="fr"><mt-button size='small' @click="createBox=true" style="margin-left: 10px;" type="danger">创建俱乐部</mt-button></span>
      </div> 
      <div class="search-bar"><input type="text" name=""></div>
      <mt-radio title="" v-model="value" align="right" :options="clubList"></mt-radio> 
      <div style="display: flex; margin: 20px 10px;"><mt-button style="flex:1;" @click='$router.push("/enroll/team/step2")'  type="primary">下一步</mt-button></div> 
    </div> 
    <div v-show="loading" class="loading-center" ref="loadBox"><mt-spinner :type="3" color="#999" :size="20"></mt-spinner>加载中…</div> 

    <mt-popup v-model="createBox" modal=false style="width:100%; height: 100%;">
      <div class="pop-page">  
        <div class="pop-page-title"><i class="pop-page-title-side fa fa-remove" @click="createBox = false"></i><b class="pop-page-title-center">创建俱乐部</b><i class="pop-page-title-side"></i></div>
        <div class="pop-page-content">
          <div class="my-field">
            <div class="my-field-item"><span class="my-field-item-l mr20">俱乐部名称</span><span class="my-field-item-r"><input type="text" class="f16" placeholder="请输入姓名" :attr="{maxlength:10}" v-model="clubName" name=""></span></div>  
            <div class="my-field-item"><span class="my-field-item-l mr20">俱乐部属性</span><span class="my-field-item-r"><popup-radio style="flex:1;" v-model="clubType" :options="typeList" title="请选择俱乐部属性"></popup-radio></span></div>
          </div>
        </div>
        <div class="pop-page-bottom"><i class="gray6" @click="createBox = false">取消</i><i class="blue" @click="createBox = false">确定</i></div> 
      </div>
    </mt-popup>

  </div>
</template>

<script>
import step from '@/components/step'
import popupRadio from '@/components/popupRadio'

export default {
  components:{
    step,popupRadio
  }, 
  data () {
    return {
      stepArr:['选择俱乐部','报名人员','选择项目','选择队员','报名预览','支付完成'],
      typeList:[{name:'社会组',value:'1'},{name:'单位组',value:'2'},{name:'其他',value:'0'}],
      clubType:'',
      clubName:'',
      value:"",
      clubList:[],
      loading:false, 
      createBox:false
    }
  },
  mounted(){
    this.getList();     
    this.$refs.loadBox.style.height = document.documentElement.clientHeight - 130 + "px"; 
  },
  methods:{
    getList(type){
      this.loading = true;

      this.loading = false;
      var list = [
        { 
          "id":1,
          "imgUrl":"",
          "members":120,
          "clueName":"天心区俱乐部", 
          "description":"天心区俱乐部"
        },
        { 
          "id":2,
          "imgUrl":"",
          "members":120,
          "clueName":"岳麓区俱乐部", 
          "description":"岳麓区俱乐部"
        },
        { 
          "id":3,
          "imgUrl":"",
          "members":120,
          "clueName":"雨花区俱乐部", 
          "description":"雨花区俱乐部雨花区俱乐部雨花区俱乐部雨花区俱乐部雨花区俱乐部雨花区俱乐部雨花区俱乐部雨花区俱乐部雨花区俱乐部雨花区俱乐部雨花区俱乐部雨花区俱乐部雨花区俱乐部"
        },
        { 
          "id":4,
          "imgUrl":"",
          "members":120,
          "clueName":"开福区俱乐部", 
          "description":"开福区俱乐部"
        },
        { 
          "id":5,
          "imgUrl":"",
          "members":120,
          "clueName":"望城区俱乐部", 
          "description":"望城区俱乐部"
        },
        { 
          "id":6,
          "imgUrl":"",
          "members":120,
          "clueName":"星沙区俱乐部", 
          "description":"星沙区俱乐部星沙区俱乐部星沙区俱乐部星沙区俱乐部星沙区俱乐部星沙区俱乐部星沙区俱乐部星沙区俱乐部星沙区俱乐部星沙区俱乐部"
        },
        { 
          "id":7,
          "imgUrl":"",
          "members":120,
          "clueName":"芙蓉区俱乐部", 
          "description":"芙蓉区俱乐部芙蓉区俱乐部芙蓉区俱乐部芙蓉区俱乐部芙蓉区俱乐部芙蓉区俱乐部芙蓉区俱乐部"
        }
      ];
      var arr = [];
      for (var i = 0; i < list.length; i++) {
        var item = list[i]; 
        arr.push({
          value:item["id"] + "",
          label:item["clueName"]
        });
      }
      this.clubList = arr;
      
      /*setTimeout(()=>{
        this.axios.get(this._site + 'club/list')
        .then(response => {
          //设置拉拽加载结束       
          var res = response.data;
          this.loading = false;
          if(res.status == 1 && res.data){
            var list = []; 
            for (var i = 0; i < res.data.length; i++) {
              var item = res.data[i]; 
              list.push({
                value:item["id"] + "",
                label:item["clueName"]
              });
            }
            this.clubList = list;
          }else{
            this.$toast({message: '加载失败'});
          }
        }).catch(error => {
          //设置拉拽加载结束
          this.$toast({message: '加载失败'});
        });
      },500)*/
    }
  }
}
</script>
